<template>
	<view>
		<mine-head title="意见反馈"></mine-head>
		<view class="content">
			<u-form :model="form" label-position="top" ref="uForm" class="form">
				<u-form-item :border-bottom="false" label="反馈内容" prop="content">
					<u-input placeholder="请填写问题描述以使我们提供更好的帮助。" :height="150" :auto-height="true"  type="textarea" v-model="form.content">
						
					</u-input>
				</u-form-item>
				<u-form-item label="" class="pic-box">
					<u-upload 
						ref="uUpload" 
						:action="action" 
						:file-list="fileList"
						:max-count="3"
						:form-data="actionData" 
						:header="header" 
						@on-success="onSuccess" 
						@on-remove="onRemove"
						@on-error="onError"
						@on-preview="previewFile"
						:show-upload-list="true"
					></u-upload>
				</u-form-item>
				<u-form-item :border-bottom="false" label="联系方式" prop="contactMode">
					<u-input placeholder="请输入联系方式(手机号、邮箱、微信号等)" type="number" v-model="form.contactMode">
						
					</u-input>
				</u-form-item>
				
			</u-form>
			<u-button class="btn" @click="submit" size="default" shape="circle" type="primary">提交</u-button>
		</view>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	export default {
		data() {
			return {
				form:{
					contactMode:'',
					content:'',
					annex:[]
				},
				rules: {
					content: [
						{ 
							required: true, 
							message: '请输入内容',
							trigger: ['change','blur'],
						}
						
					],
					contactMode: [
						{ 
							required: true, 
							message: '请输入联系方式', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						},
						{
							pattern: /^1[345789]\d{9}$/,
							message: '请输入正确的手机号',
							trigger: 'change',
						  }
					],
				},
				fileList:[],
				action: config.host1 + '/app/common/upload',
				actionData: {
					oldFile: '',
					path:''
				},
				header: {
					authorization: ''
				},
				host:null
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.host = config.host1
			this.header.authorization = uni.$_getToken()
		},
		onShow() {
			
		},
		methods:{
			addFn(){
				let that = this
				uni.$_post({
					url: "appFeedback",
					that: that,
					params: that.form,
					success(res) {
						let data = res.data;
						if(res.code == 0){
								uni.showToast({
									title: '提交成功！',
									duration: 1500,
									icon: 'success'
								});
								setTimeout(() => {
								  uni.navigateBack({
									delta:1
								  })
								}, 1500);
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			onSuccess(data, index, lists, name) {
				this.form.annex.push(data.data)
				console.log(this.form.annex)
				this.fileList = lists
			},
			onRemove(index, lists) {
				console.log(lists)
				let arr = [];
				lists.forEach(e => {
				    arr.push(e.response.data)
				})
				this.form.annex = arr;
				console.log(this.form.annex,222)
			},
			onError(res){
				uni.showToast({
					title: res.msg,
					duration: 1000,
					icon: 'error'
				});
			},
			previewFile(file) {
			  // 这里可以编写预览文件的逻辑，例如打开一个新页面或弹窗显示图片/PDF
			  // 这里只是打印出文件的URL，实际应用中需要根据文件类型来决定如何预览
			  console.log('Preview file:', file.url);
			},
			submit() {
				let that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.addFn()
						// uni.$_post({
						// 	url: "feedback-form",
						// 	that: that,
						// 	params: that.form,
						// 	success(res) {
						// 		let _data = res.data;
						// 		if (res.code == 0) {
						// 			uni.showToast({
						// 				title: '提交成功！',
						// 				duration: 1500,
						// 				icon: 'success'
						// 			});
						// 			that.onClose()
						// 			setTimeout(() => {
						// 			  uni.navigateBack({
						// 			  	delta:1
						// 			  })
						// 			}, 1500);
						// 		}
						
						// 	},
						// 	fail(err) {
						
						// 	},
						// });
					} else {
						console.log('验证失败');
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
/deep/.u-input{
	background-color: #F7F7F7;
	border-radius: 12rpx;
	padding: 5rpx 10rpx !important;
}
/deep/.uni-input-input{
	padding-left: 25rpx;
}

/deep/.u-form-item--left__content__label{
	padding-left: 30rpx;
	background: url(@/static/img/mine/xinghao.png) no-repeat center left / 16rpx 20rpx;
}
.content{
	padding: 30rpx;
}
.form{
	margin-bottom: 80rpx;
}
</style>
